<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>租房</title>
    <link rel="stylesheet" href="ui.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #f4f4f4;
            padding: 20px;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-container {
            font-size: 24px;
            font-weight: bold;
        }

        .sub-nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #333;
        }

        .logo-search form {
            display: flex;
        }

        .logo-search input {
            padding: 10px;
            border: 1px solid #ccc;
            border-right: none;
        }

        .logo-search button {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }

        .category-nav {
            background-color: #eaeaea;
            padding: 10px;
        }

        .category-nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #333;
        }

        .breadcrumbs {
            padding: 10px 20px;
        }

        .filter-area {
            padding: 20px;
        }

        .filter-group {
            margin-bottom: 15px;
        }

        .filter-reset {
            padding: 10px 20px;
            background-color: #ccc;
            color: white;
            border: none;
            cursor: pointer;
        }

        .listing-area {
            padding: 20px;
        }

        .listing-tab {
            margin-bottom: 20px;
        }

        .listing-tab a {
            margin-right: 15px;
            text-decoration: none;
            color: #333;
        }

        .listing-tab a.active {
            color: #007BFF;
            font-weight: bold;
        }

        .listing-item {
            border: 1px solid #ccc;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .listing-img img {
            width: 100px;
            height: 100px;
            object-fit: cover;
        }

        .tag {
            background-color: #007BFF;
            color: white;
            padding: 5px 10px;
            border-radius: 3px;
            margin-left: 10px;
        }

        .listing-info {
            margin-top: 10px;
        }

        .listing-price {
            margin-top: 10px;
            font-weight: bold;
            color: #007BFF;
        }
    </style>
</head>

<body>
<!-- 顶部导航栏 -->
<header>
    <div class="top-bar">
        <div class="logo-container">
            <!-- <img src="logo.jpg" alt="logo"> -->
            <span class="logo-text">浮点流觞</span>
        </div>
        <div class="sub-nav">
            <a href="gerenzhongxin.html">个人中心</a>
            <a href="#">商家中心</a>
            <a href="bangzhuzhongxin.html">帮助中心</a>
            <a href="kefu.html">联系客服</a>
            <a href="login.html" class="login-item">登录</a>
            <a href="register.html" class="register-item">注册</a>
        </div>
    </div>
    <div class="logo-search">
        <form action="#" class="search-form">
            <input type="text" placeholder="请输入房源相关信息">
            <button type="submit">搜房源</button>
        </form>
        <a href="fabufangyuan.html" class="free-publish">免费发布</a>
    </div>
</header>

<!-- 分类导航栏 -->
<nav class="category-nav">
    <a href="#" class="category-item">租房</a>
    <a href="#" class="category-item">二手房</a>
    <a href="#" class="category-item">新房</a>
    <a href="#" class="category-item">商铺</a>
    <a href="#" class="category-item">生意转让</a>
    <a href="#" class="category-item">写字楼</a>
    <a href="#" class="category-item">厂房</a>
    <a href="#" class="category-item">仓库</a>
    <a href="#" class="category-item">土地</a>
    <a href="#" class="category-item">车位</a>
</nav>

<!-- 路径导航 -->
<div class="breadcrumbs">
    <a href="#">房产网</a> > <a href="#">出租房</a>
</div>

<!-- 筛选条件区域 -->
<div class="filter-area">
    <div class="filter-group">
        <label for="region">地域</label>
        <select id="region">
            <option value="不限">不限</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="成都">成都</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
            <option value="杭州">杭州</option>
            <option value="西安">西安</option>
        </select>
    </div>
    <div class="filter-group">
        <label for="area">区域</label>
        <select id="area">
            <option value="不限">不限</option>
            <!-- 北京的区域示例 -->
            <option value="朝阳区" data-region="北京">朝阳区</option>
            <option value="海淀区" data-region="北京">海淀区</option>
            <!-- 上海的区域示例 -->
            <option value="浦东新区" data-region="上海">浦东新区</option>
            <option value="黄浦区" data-region="上海">黄浦区</option>
            <!-- 成都的区域示例 -->
            <option value="武侯区" data-region="成都">武侯区</option>
            <option value="锦江区" data-region="成都">锦江区</option>
            <!-- 广州的区域示例 -->
            <option value="天河区" data-region="广州">天河区</option>
            <option value="越秀区" data-region="广州">越秀区</option>
            <!-- 深圳的区域示例 -->
            <option value="南山区" data-region="深圳">南山区</option>
            <option value="福田区" data-region="深圳">福田区</option>
            <!-- 杭州的区域示例 -->
            <option value="西湖区" data-region="杭州">西湖区</option>
            <option value="滨江区" data-region="杭州">滨江区</option>
            <!-- 西安的区域示例 -->
            <option value="雁塔区" data-region="西安">雁塔区</option>
            <option value="未央区" data-region="西安">未央区</option>
        </select>
    </div>
    <div class="filter-group">
        <label for="subway">地铁线路</label>
        <select id="subway">
            <option value="不限">不限</option>
            <!-- 地铁线路选项可按需求添加 -->
        </select>
    </div>
    <div class="filter-group">
        <label for="community">小区</label>
        <input type="text" id="community">
    </div>
    <div class="filter-group">
        <label for="rent">租金</label>
        <select id="rent">
            <option value="不限">不限</option>
            <option value="500以下">500以下</option>
            <option value="500-1000">500-1000</option>
            <!-- 其他租金区间选项可按需求添加 -->
        </select>
    </div>
    <div class="filter-group">
        <label for="room">厅室</label>
        <select id="room">
            <option value="不限">不限</option>
            <option value="一室">一室</option>
            <option value="两室">两室</option>
            <!-- 其他厅室选项可按需求添加 -->
        </select>
    </div>
    <div class="filter-group">
        <label for="way">方式</label>
        <select id="way">
            <option value="不限">不限</option>
            <option value="整租">整租</option>
            <option value="合租/单间">合租/单间</option>
        </select>
    </div>
    <div class="filter-group">
        <label for="other">其他</label>
        <select id="other">
            <option value="朝向不限">朝向不限</option>
            <option value="装修不限">装修不限</option>
            <!-- 其他筛选选项可按需求添加 -->
        </select>
    </div>
    <button type="button" class="filter-reset">重置筛选</button>
</div>

<!-- 房源展示区域 -->
<main class="listing-area">
    <div class="listing-tab">
        <a href="#" class="tab-item active">出租房</a>
        <a href="#" class="tab-item">个人房源</a>
        <a href="#" class="tab-item">实拍真房</a>
        <a href="#" class="tab-item">经纪人</a>
        <a href="#" class="tab-item">安选房源</a>
        <a href="#" class="tab-item">长租公寓</a>
        <a href="#" class="tab-item">民宿短租</a>
        <a href="#" class="contact客服">联系客服</a>
    </div>
    <div id="listing-container"></div> <!-- 新增的房源容器 -->
</main>

<script>
    // 模拟房源数据

    // 渲染房源列表
    function renderListings(listings) {
        const listingContainer = document.getElementById('listing-container');
        listingContainer.innerHTML = "";
        listings.forEach(listing => {
            const listingItem = document.createElement('div');
            listingItem.classList.add('listing-item');
            listingItem.innerHTML = `
                    <div class="listing-img">
                        <img src="${listing.img}" alt="房源图片">
                        <span class="tag">安选</span>
                    </div>
                    <div class="listing-info">
                        <span class="type">${listing.type}</span> | <span class="room-info">${listing.roomInfo}</span>
                        <p class="area">${listing.area}</p>
                        <p class="location">${listing.location}</p>
                        <p class="agent">${listing.agent}</p>
                    </div>
                    <div class="listing-price">
                        <span class="price">${listing.price}</span>
                    </div>
                `;
            listingContainer.appendChild(listingItem);
        });
    }

    // 筛选房源
    function filterListings() {
        const region = document.getElementById('region').value;
        const area = document.getElementById('area').value;
        const subway = document.getElementById('subway').value;
        const community = document.getElementById('community').value;
        const rent = document.getElementById('rent').value;
        const room = document.getElementById('room').value;
        const way = document.getElementById('way').value;
        const other = document.getElementById('other').value;

        let filteredListings = rentalListings;

        if (region!== "不限") {
            filteredListings = filteredListings.filter(listing => listing.region === region);
        }
        if (area!== "不限") {
            filteredListings = filteredListings.filter(listing => listing.areaName === area);
        }
        if (subway!== "不限") {
            filteredListings = filteredListings.filter(listing => listing.subway === subway);
        }
        if (community) {
            filteredListings = filteredListings.filter(listing => listing.community.includes(community));
        }
        if (rent!== "不限") {
            // 简单处理租金筛选，可根据实际情况优化
            const [min, max] = rent.split('-');
            if (min) {
                filteredListings = filteredListings.filter(listing => {
                    const listingPrice = parseInt(listing.price.split('元')[0]);
                    return listingPrice >= parseInt(min);
                });
            }
            if (max) {
                filteredListings = filteredListings.filter(listing => {
                    const listingPrice = parseInt(listing.price.split('元')[0]);
                    return listingPrice <= parseInt(max);
                });
            }
        }
        if (room!== "不限") {
            filteredListings = filteredListings.filter(listing => listing.roomType === room);
        }
        if (way!== "不限") {
            filteredListings = filteredListings.filter(listing => listing.way === way);
        }
        if (other!== "朝向不限" && other!== "装修不限") {
            filteredListings = filteredListings.filter(listing => listing.other === other);
        }

        renderListings(filteredListings);
    }

    // 初始渲染房源列表
    renderListings(rentalListings);

    // 绑定筛选事件
    const regionSelect = document.getElementById('region');
    const areaSelect = document.getElementById('area');
    const subwaySelect = document.getElementById('subway');
    const communityInput = document.getElementById('community');
    const rentSelect = document.getElementById('rent');
    const roomSelect = document.getElementById('room');
    const waySelect = document.getElementById('way');
    const otherSelect = document.getElementById('other');
    const resetButton = document.querySelector('.filter-reset');

    regionSelect.addEventListener('change', filterListings);
    areaSelect.addEventListener('change', filterListings);
    subwaySelect.addEventListener('change', filterListings);
    communityInput.addEventListener('input', filterListings);
    rentSelect.addEventListener('change', filterListings);
    roomSelect.addEventListener('change', filterListings);
    waySelect.addEventListener('change', filterListings);
    otherSelect.addEventListener('change', filterListings);
    resetButton.addEventListener('click', () => {
        regionSelect.value = "不限";
        areaSelect.value = "不限";
        subwaySelect.value = "不限";
        communityInput.value = "";
        rentSelect.value = "不限";
        roomSelect.value = "不限";
        waySelect.value = "不限";
        otherSelect.value = "朝向不限";
        renderListings(rentalListings);
    });
</script>
</body>

</html>